import 'package:flutter/material.dart';
import 'package:flutter_syt/api/api.dart';
import 'package:flutter_syt/datas/game_video_list_item.dart';
import 'package:flutter_syt/domain/games/game_utils/game_utils_controller.dart';
import 'package:flutter_syt/domain/widgets/network_load_image.dart';
import 'package:flutter_syt/generated/l10n.dart';
import 'package:flutter_syt/theme/theme_color.dart';
import 'package:flutter_syt/widgets/normal_grid.dart';
import 'package:yyy_route_annotation/yyy_route_annotation.dart';

import 'game_live_list.dart';

@RoutePage(name: "gameVideoList")
class GameVideoListPage extends StatefulWidget {
  bool needBar = true;
  @override
  State<StatefulWidget> createState() {
    return _GameVideoListState(S().video_on_demand, needBar);
  }
}

class _GameVideoListState extends GameLiveListState {
  NormalGridController _gridController = NormalGridController();
  _GameVideoListState(String title, bool needBar) : super(title, needBar);

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    GameUtilsController.managerCont['7'] = _gridController;
  }

  @override
  Widget buildItem(GameVideoListItem item) {
    var role = item.role_exclusive_name;
    return AspectRatio(
      aspectRatio: 173.0 / 141.0,
      child: Column(
        children: [
          AspectRatio(
            aspectRatio: 173.0 / 98.0,
            child: ClipRRect(
              borderRadius: BorderRadius.all(Radius.circular(12)),
              child: Stack(
                children: [
                  NetworkLoadImage.loadNetworkImage(
                    // CachedNetworkImage(
                    // imageUrl:
                    item.cover,
                    fit: BoxFit.cover,
                    width: double.infinity,
                    height: double.infinity,
                  ),
                  // Positioned.fill(
                  //   child: Column(
                  //     mainAxisAlignment: MainAxisAlignment.end,
                  //     children: [
                  //       Container(
                  //         height: 40,
                  //         decoration: BoxDecoration(
                  //             gradient: LinearGradient(
                  //           colors: [
                  //             Color(0xff131313).withOpacity(0.75),
                  //             Color(0xff1b1b1b).withOpacity(0.41),
                  //             Color(0x00242424),
                  //           ],
                  //           begin: Alignment.bottomCenter,
                  //           end: Alignment.topCenter,
                  //         )),
                  //       ),
                  //     ],
                  //   ),
                  // ),
                  Positioned.fill(
                    child: Column(
                      children: [
                        if (role.length > 0)
                          Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: [
                              Container(
                                padding: EdgeInsets.symmetric(
                                    horizontal: 10, vertical: 2),
                                decoration: BoxDecoration(
                                  color: ThemeColor.primaryColor,
                                  borderRadius: BorderRadius.only(
                                    bottomLeft: Radius.circular(8),
                                    topRight: Radius.circular(8),
                                  ),
                                ),
                                child: Text(
                                  role,
                                  style: TextStyle(
                                      fontSize: 11,
                                      color: Colors.black,
                                      fontWeight: FontWeight.w500),
                                ),
                              ),
                            ],
                          ),
                        Spacer(),
                        Container(
                          padding:
                              EdgeInsets.symmetric(horizontal: 8, vertical: 8),
                          child: Row(
                            children: [
                              Container(
                                padding: EdgeInsets.symmetric(
                                  horizontal: 10,
                                  vertical: 3,
                                ),
                                decoration: BoxDecoration(
                                  color: Colors.black.withOpacity(0.6),
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(9)),
                                ),
                                child: Row(
                                  children: [
                                    Text(
                                      "${item.duration}",
                                      style: TextStyle(
                                        fontSize: 11,
                                        color: Colors.white,
                                        fontWeight: FontWeight.w500,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
          Container(
            color: Colors.white,
            height: 8,
          ),
          Row(
            children: [
              Flexible(
                child: Text(
                  item.name,
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                    color: Colors.black.withOpacity(0.8),
                    fontSize: 12,
                  ),
                ),
              )
            ],
          )
        ],
      ),
    );
  }

  @override
  refreshData() {
    _gridController.reloadData();
  }

  @override
  Widget content() {
    return NormalGridView<GameVideoListItem>(
      controller: _gridController,
      crossAxisCount: 2,
      crossAxisSpacing: 10,
      mainAxisSpacing: 15,
      padding: EdgeInsets.all(10),
      enableLoadMore: false,
      itemBuilder: (ctx, data, index) {
        return itemWidget(data);
      },
      getData: (page) async {
        gameList = await API.shared.game.items();
        venueList = await API.shared.venue.list();
        setState(() {});
        String? venue, game;
        try {
          venue = venueList[selectedVenue].code;
        } catch (e) {}
        try {
          game = gameList[selectedGame].id;
        } catch (e) {}
        return API.shared.game.gameVideoList(2, venue: venue, discipline: game);
      },
    );
  }
}
